<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" size="mini" :inline="true" v-show="showSearch" label-width="auto">
            <div style="display: flex;" class="mb5">
                <el-form-item label="您是" prop="year" class="el-form-search-item">
                    <el-date-picker v-model="queryParams.year" type="year" placeholder="选择年份">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="年的" prop="type" class="el-form-search-item">
                    <el-select v-model="queryParams.type" placeholder="文科/理科" clearable>
                        <el-option v-for="dict in dict.type.program_type" :key="dict.value" :label="dict.label"
                            :value="dict.value" />
                    </el-select>
                </el-form-item>
                <div class="el-form-item__label" style="line-height: 29px;">的考生，成绩___分，加分___分。</div>
                <el-form-item label="选择报考" prop="school" class="el-form-search-item">
                    <el-select v-model="queryParams.school" placeholder="学校" clearable>
                        <el-option v-for="dict in dict.type.school_list" :key="dict.value" :label="dict.label"
                            :value="dict.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="" prop="major" class="el-form-search-item">
                    <el-select v-model="queryParams.major" placeholder="专业" clearable>
                        <el-option v-for="dict in dict.type.school_major" :key="dict.value" :label="dict.label"
                            :value="dict.value" />
                    </el-select>
                </el-form-item>
                <el-form-item class="el-form-search-item">
                    <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
                </el-form-item>
            </div>
        </el-form>

        <el-table :height="tableHeight" v-loading="loading" :data="simulateList">
            <el-table-column label="年份" align="center" prop="mcode" />
            <el-table-column label="分数线" align="center" prop="mname" />
            <el-table-column label="录取最低分" align="center" prop="mtype" />
            <el-table-column label="您的名次对应当年分数" align="center" prop="mtype" />
            <el-table-column label="录取平均分" align="center" prop="mtype" />
            <el-table-column label="最低分名次" align="center" prop="mtype" />
            <el-table-column label="您的名次" align="center" prop="mtype" />
            <el-table-column label="平均分名次" align="center" prop="mtype" />
            <el-table-column label="投档概率" align="center" prop="mtype" />
            <el-table-column label="计划招生数、投档数、录取数" align="center" prop="mtype" />
            <el-table-column label="全国排名" align="center" prop="mtype" />
        </el-table>
        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize" @pagination="getList" />
    </div>
</template>

<script>
import { getToken } from "@/utils/auth";
import { listSimulateQuery } from "@/api/system/admission";
export default {
    name: "query",
    dicts: ['program_type', 'school_list', 'school_major'],
    data() {
        return {
            showSearch: true,
            // 查询参数
            queryParams: {
                year: "",
                type:"",
                school:"",
                major:"",
                pageNum: 1,
                pageSize: 20,
                orderByColumn: "",
                isAsc: "asc",
            },
            tableHeight: document.documentElement.clientHeight - 180,
            loading: false,
            total: 0,
            simulateList: []
        }
    },
    methods: {
        handleQuery() { },
        getList() {
            this.loading = true;
            listSimulateQuery(this.queryParams).then(response => {
                this.simulateList = response.rows;
                this.total = response.total;
                this.loading = false;
            });
        },
    },
    created() {
        // this.getList();
    }
}
</script>

<style lang="scss" scoped>
.app-container .el-form-item--mini.el-form-item {
    margin-bottom: unset !important;
}

.el-form-item__label {
    padding-left: 12px;
}
.el-form-search-item {
    ::v-deep .el-form-item__label {
        line-height: 30px;
    }
}
</style>